<template>
  <div class="my-attention-box">
    <h1 style="text-align: center;" v-if="total === 0">没有关注用户</h1>
    <template v-else>
      <UserCard v-for="(user, index) in users" :user="user" :key="index"></UserCard>
    </template>
  </div>
</template>

<script>
import UserCard from "@/components/UserCard";
import {listAttentionUser} from "@/api/apis";

export default {
  name: "MyAttention",
  components:{
    UserCard,
  },
  data(){
    return {
      total: 1,   // 没有加分页器 设置为有关注用户
      users: [],
    }
  },
  created(){
    this.handleListAttentionUser()
  },
  methods: {
    handleListAttentionUser(){
      listAttentionUser().then(response => {
        this.users = response.data
      })
    }
  },
}
</script>

<style scoped>
  .my-attention-box{
    margin-top: 20px;
  }
  @media screen and (max-width: 767px){
    .my-attention-box{
      padding: 0 20px;
    }
  }
  @media screen and (min-width: 768px){
    .my-attention-box{
      padding: 0 200px;
    }
  }
</style>
